iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 19
0
自我挑戰組

30 天 CSS 隨手筆記系列 第 19

30 天 CSS 隨手筆記 - 第 19 天 - UX 相關的眉角 ( 3/? )

  • 分享至 

  • xImage
  •  

編輯中,僅請見諒


主要參考 CSS SECRETS 這本書裡面的內容作筆記~


before / after 的圖片效果

在比較差異大的圖片時,並排是個不錯的選項。

例如之前比較各個 filter 效果時,就是用並排的:

但當兩張圖很像時,差別就不是這麼好看出來了

例如:https://jsfiddle.net/lazy_shyu/6k1dpx4g/1/

尤其對我這種眼力是負值的人 (=艸 =" )

要解決這個問題,其中一個解法是利用 hover 效果

https://jsfiddle.net/lazy_shyu/6k1dpx4g/2/

有點像之前全聯的廣告的效果,總之可以明確地看出圖片不一樣的地方。

另外還可以使用 resize 做出拖拉互動的效果~

https://jsfiddle.net/lazy_shyu/6k1dpx4g/6/

<div class="image-slider">
    <div class="image-before"><img src="圖片一" alt=""></div>
    <div class="image-after"><img src="圖片二"  alt=""></div>
</div>
.image-before {
    width: 2 * $button-size; /* 最小寬度 */
    max-width: $img-size;    /* 最大寬度 */
    overflow: hidden;
    resize: horizontal;      /* 可以水平設定大小 */
}

套用在 filter 的呈現上,效果也很不錯 <3

https://jsfiddle.net/lazy_shyu/6k1dpx4g/7/

類似的呈現還有:

  1. 比較圖片解析度
  2. 漫畫 上色前 / 上色後

sticky 效果

position: sticky 是一個很棒的效果,但可惜的是 chrome 一直不支援。

almost there~!! chrome 快要支援了

以前的 instagram 的 app 體驗就很好

在網路上要找圖找不到,結果想用螢幕錄影時才發現改掉了 Orz )
whyyyyyy 我真的覺得那樣體驗很好的 O____Q


上一篇
30 天 CSS 隨手筆記 - 第 18 天 - UX 相關的眉角 ( 2/3 )
下一篇
30 天 CSS 隨手筆記 - 第 20 天 - CSS4 selectors ( 1/2 )
系列文
30 天 CSS 隨手筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言